<style scoped lang="stylus" type="text/stylus">
  @import "assist.styl"
</style>

<template>
  <div class="assist-page">
    <div class="assist-header">
      <span @click="toDo()" :class="{active:active}" class="to-do">待处理</span>
      <span @click="replied()" :class="{active:!active}" class="replied">已回复企业</span>
    </div>
    <div class="assist-content">
      <VuePerfectScrollbar v-show="active" class="ps to-do">
        <div class="to-do-items common" v-for="item in toDoList" :key="item.id">
          <div class="company-name">{{item.orgName}}</div>
          <div class="date">帮扶申请提交时间：<span class="time">{{getTime(item.submitTime)}}</span>（{{item.submitTimeText}}）
          </div>
          <div class="con">
            <div class="title">{{item.title}}</div>
            <div class="text">{{item.content}}</div>
            <div class="img-items" v-if="filesFormat(item.files)">
              <ul>
                <li class="img-list" v-for="(items,index) in filesFormat(item.files)" :key="index">
                  <img :src="items" alt="">
                  <div @click="handleView(items)" class="img-list-hover">
                    <Icon class="read" type="ios-eye-outline"></Icon>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="reply">
            <div class="btn-reply" @click="showReplyLayer(item.id)">回复企业</div>
          </div>
        </div>
      </VuePerfectScrollbar>

      <VuePerfectScrollbar v-show="!active" class="ps replied">
        <div class="replied-items" v-for="item in repliedList" :key="item.id">
          <div class="replied-block common">
            <div class="company-name">{{item.orgName}}</div>
            <div class="date">帮扶申请提交时间：{{getTime(item.submitTime)}}</div>
            <div class="con">
              <div class="title">{{item.title}}</div>
              <div class="text">{{item.content}}</div>
              <div class="img-items" v-if="filesFormat(item.files)">
                <ul>
                  <li class="img-list" v-for="items in filesFormat(item.files)" :key="items.id">
                    <img :src="items" alt="">
                    <div @click="handleView(items)" class="img-list-hover">
                      <Icon class="read" type="ios-eye-outline"></Icon>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

          </div>
          <div class="replied-info">
            <div class="info">
              <p class="text">{{item.replyText}}</p>
              <p>办事员：{{item.userName}}</p>
              <p>帮扶申请提交时间：{{item.replyTime}}（{{item.replyTimeText}}）</p>
            </div>
          </div>
        </div>
      </VuePerfectScrollbar>
    </div>

    <Modal
      @on-cancel="closeReplyLayer()"
      v-model="replyLayer"
      title="回复企业">
      <Input :maxlength="5000" type="textarea" :autosize="{minRows: 5,maxRows: 8}" autofocus="autofocus"
             placeholder="请输入..."
             v-model="replyValue"></Input>
      <div slot="footer">
        <Button @click="closeReplyLayer()" type="text">取消</Button>
        <Button type="primary" @click="subReply()" :disabled="checkForm" size="large">提交</Button>
      </div>
    </Modal>

    <Modal title="查看图片" v-model="imgBig" :width="60" class-name="model-img-1">
      <VuePerfectScrollbar class="model-img-ps">
        <img class="model-img" style="width: 100%;" :src="modelImg" alt="">
      </VuePerfectScrollbar>
    </Modal>
  </div>
</template>
<style>
  .model-img-1 .ivu-modal {
    top : calc((35vh - 142px) / 2);
  }

  .model-img-ps {
    max-height : 65vh
  }

  .model-img {
    width : 100%
  }
</style>
<script type="text/ecmascript-6">

  export default {
    name      : 'Assist',
    data() {
      return {
        active    : !0,
        replyLayer: false,
        replyValue: '',

        toDoList   : [],
        repliedList: [],

        replyId: '',

        imgBig        : false,
        modelImgActive: 0,
        modelImgItems : [],
        modelImg      : []
      }
    },
    computed  : {
      checkForm() {
        return this.replyValue ? false : 'disabled'
      }
    },
    methods   : {
      toDo() {
        this.active = !0
        this.getToDo();
      },
      replied() {
        this.active = false
        this.getReplied()
      },
      getToDo() {
        this.ajaxData({
          urlv2: '1',
          type : 'get',
          url  : `/help/findPendingList`
        }, (res, all) => {
          if (all.code == 0) {
            this.toDoList = res
          }
        })
      },
      getReplied() {
        this.ajaxData({
          urlv2: '1',
          type : 'get',
          url  : `/help/findReplyList`
        }, (res, all) => {
          if (all.code == 0) {
            this.repliedList = res
          }
        })
      },

      filesFormat(str) {
        if (!str) {
          return;
        }
        return str.split(',');
      },

      showReplyLayer(id) {
        this.replyId    = id
        this.replyValue = ''
        this.replyLayer = !0
      },
      closeReplyLayer() {
        this.replyLayer = false
      },
      subReply() {
        this.ajaxData({
          urlv2: '1',
          type : 'post',
          url  : `/help/replyHelpInfo`,
          data : {
            id       : this.replyId,
            type     : '2',
            replyText: this.replyValue
          }
        }, (res, all) => {
          if (all.code == 0) {
            this.replyLayer = false
            this.getToDo()
          }
        })
      },

      handleView(items) {
        this.imgBig   = !0
        this.modelImg = items;
      },
    },
    created() {
      this.getToDo();
    }
  }
</script>
